<template>
  <view>
    <u-popup
      v-model="popShow"
      mode="right"
      width="550"
      @close="closePop">
      <u-cell-group v-if="page == 'sourcegoods'">
        <u-cell-item
          title="货源单号"
          :arrow="false">
          <u-search
            style="width: 100%"
            placeholder="请输入货源单号"
            bg-color="white"
            :show-action="false"
            v-model="searchObj.sourceCode"
            @clear="searchObj.sourceCode = ''"></u-search>
        </u-cell-item>
        <u-cell-item
          @click="loadPlaceBtn"
          title="始发地">
          {{ searchObj.loadPlace ? searchObj.loadPlace : '' }}
        </u-cell-item>
        <u-cell-item
          @click="targetPlaceBtn"
          title="目的地">
          {{ searchObj.targetPlace ? searchObj.targetPlace : '' }}
        </u-cell-item>
        <u-cell-item
          @click="timeBtn"
          title="日期">
          {{ searchObj.createTime ? searchObj.createTime : '' }}
        </u-cell-item>
      </u-cell-group>
      <u-cell-group v-if="page == 'waybill'">
        <u-cell-item
          title="订单编号"
          :arrow="false">
          <u-search
            style="width: 100%"
            placeholder="请输入订单编号"
            bg-color="white"
            :show-action="false"
            v-model="searchObj.dispatchCode"
            @clear="searchObj.dispatchCode = ''"></u-search>
        </u-cell-item>
      </u-cell-group>
      <view class="buttons">
        <view class="btn">
          <u-button
            type="primary"
            size="medium"
            plain
            @click="resetDataList">
            重置
          </u-button>
          <u-button
            type="primary"
            size="medium"
            @click="getDataList">
            筛选
          </u-button>
        </view>
      </view>
    </u-popup>
    <!-- 时间组件 -->
    <u-picker
      v-model="timeshow"
      mode="time"
      @confirm="pickerTimeSelect"
      @cancel="pickerTimeCancelSelect"></u-picker>
    <!-- 地区组件 -->
    <u-picker
      mode="region"
      v-model="regionshow"
      @confirm="pickerRegionSelect"
      @cancel="pickerRegionCancelSelect"></u-picker>
  </view>
</template>
<script>
export default {
  name: 'C_popSearch',
  props: {
    popSearchShow: {
      type: Boolean,
      default: false
    },
    page: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      regionshowtype: '',
      regionshow: false,
      timeshow: false,
      searchObj: {
        loadPlace: '',
        targetPlace: '',
        createTime: '',
        sourceCode: '',
        dispatchCode: ''
      }
    }
  },
  computed: {
    popShow: {
      get() {
        return this.popSearchShow
      },
      set() {
        return this.popSearchShow
      }
    }
  },
  methods: {
    //始发地
    loadPlaceBtn() {
      this.regionshowtype = '0'
      this.regionshow = true
    },
    //目的地
    targetPlaceBtn() {
      this.regionshowtype = '1'
      this.regionshow = true
    },
    //日期
    timeBtn() {
      this.timeshowtype = '2'
      this.timeshow = true
    },
    //日期选择确认
    pickerTimeSelect(val) {
      if (this.timeshowtype == '2') {
        this.searchObj.createTime = val.year + '-' + val.month + '-' + val.day
      } else if (this.timeshowtype == '0') {
        this.searchObj.createTime = val.year + '-' + val.month + '-' + val.day
      }
    },
    //日期选择取消
    pickerTimeCancelSelect() {
      if (this.timeshowtype == '2') {
        this.searchObj.createTime = ''
      } else if (this.timeshowtype == '0') {
        this.searchObj.createTime = ''
      }
    },
    //地区组件确认
    pickerRegionSelect(val) {
      if (this.regionshowtype == '0') {
        this.searchObj.loadPlace = val.area.label
      } else {
        this.searchObj.targetPlace = val.area.label
      }
    },
    //地区组件取消
    pickerRegionCancelSelect() {
      if (this.regionshowtype == '0') {
        this.searchObj.loadPlace = ''
      } else {
        this.searchObj.targetPlace = ''
      }
    },
    closePop() {
      this.$emit('closePop')
    },
    resetDataList() {
      this.searchObj = {
        loadPlace: '',
        targetPlace: '',
        createTime: '',
        sourceCode: '',
        dispatchCode: ''
      }
      this.getDataList()
    },
    getDataList() {
      this.$emit('getDataList', this.searchObj)
    }
  }
}
</script>
<style lang="scss" scoped>
.buttons {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  .btn {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
  }
}
</style>
